<template>
    <div class="graphd">
      <div class="ask">
        <div class="header">
          <i
            class="el-icon-service"
            style="font-size: large; margin-right: 10px"
          />
          作战规则推理
        </div>
        <div class="input">
          
          <el-autocomplete
            placeholder="请输入作战规则"
            v-model="ruleInput"
            @keyup.enter.native="rulePredictSearch()"
            clearable
            :fetch-suggestions="recommendQues"
            style="width: 100%"
          >
            <el-button
              slot="append"
              @click="rulePredictSearch()"
            >开始推理</el-button>
          </el-autocomplete>
        </div>
      </div>
      <div class="answer">
        <div class="header">答案</div>
        <div class="text" v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading">
          <el-table
          
          :data="this.tableData"
          border
          :header-cell-style="{backgroundColor:'#f6f8fa', color: '#333'}"
          
          style="width: 100%;height: 100%;">
          <el-table-column
            type="index"
            width="40">
          </el-table-column>
          <el-table-column
            prop="zzgzName"
            label="规则名称"
           >
          </el-table-column>
          <el-table-column
            prop="condition"
            label="规则条件"
           >
          </el-table-column>
          <el-table-column
            prop="action"
            label="规则动作"
            >
          </el-table-column>
          <el-table-column
            prop="score"
            label="分数"
            width="70">
          </el-table-column>
        </el-table>
        </div>
      </div>
      <div class="graph">
        <div class="header">图谱演示</div>
        <div class="show">
          <div v-show="this.showNone" style="margin-top: 15px;font-family: 'Courier New', Courier, monospace;">图谱查无结果！</div>
          <GraphBoard ref="rulePredictBoard" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import GraphBoard from '../../graph/components/GraphBoard'
  import { _graphData } from '../../graph/utils/data'
  
  export default {
    name: 'RulePredict',
    components: {
      GraphBoard,
    },
    data() {
      return {
        ruleInput: '',
        graphData: null,
        recommendHotQues: [],
        loading: false,
        // tableData: [{
        //     zzgzName: '',
        //     condition: '',
        //     // conditionId: 0,
        //     action: '',
        //     rank: 0,
        //     score: 0,
            
        // }]
        tableData:null,
        showNone: false
      }
    },
    mounted() {
      const projectId = Number(this.$route.params.projectId)
      // this.getHotQuestionList(projectId)
      this.ruleInput = this.rulePredictQues.text
      if (!this.rulePredictGraphData) {
        return
      } else {
        this.renderGraph()
      }
      if (!this.rulePredictTableData) {
        return
      } else {
        this.loading = true
        this.renderTable()
        this.loading = false
      }
    },
    computed: {
      ...mapGetters([
        'rulePredictQues',
        // 'dialogueQueryGraphData',
        // 'dialogueAnswer',
        'hotQuestions',
        'rulePredictGraphData',
        'rulePredictTableData'
      ]),
    },
    methods: {
      ...mapMutations(['setRulePredictQues']),
      ...mapActions([
        'getProjectInfo',
        'getHotQuestionList',
        'rulePredict',
        'rulePredictTable'
      ]),
      renderGraph() {
        this.graphData = this.rulePredictGraphData.graph
        // console.log("graphData")
        // console.log(this.graphData)
        const rulePredictBoard = this.$refs.rulePredictBoard
        rulePredictBoard.mountGraphData(this.graphData)
      },
      renderTable() {
        this.tableData = this.rulePredictTableData.data
        console.log(this.tableData)
      },
      

      rulePredictSearch() {
        if(this.ruleInput === '') {
          this.$message.warning("作战规则不能为空")
        }
        this.loading = true
        console.log( this.loading)
        const projectId = Number(this.$route.params.projectId)
        const rulePredictQues = {
         projectId,
          text: this.ruleInput,
        } 
        this.setRulePredictQues(rulePredictQues)
        
        console.log(rulePredictQues)
        this.rulePredictTable(rulePredictQues).then((res) => {
          console.log("res",res)
          if (res!== null) {
            this.renderTable()
            this.loading = false
          } else {
            this.loading = false
            this.$message.warning('查无结果！')
          }
          // }else {
          //   this.loading = false
          //   this.$message.warning('推理过程产生错误！')
          // }
          
        })
        this.rulePredict(rulePredictQues).then((res) => {
          console.log("res**************************************")
          console.log("res",res)
         
          if (res === null) {
            this.loading = false
            this.showNone = true
            // this.$message.warning('图谱查无结果！')
          } else {
            this.renderGraph()
          }
        })
        
      },
      recommendQues(queryString, cb) {
        this.recommendHotQues = this.hotQuestions
        cb(this.recommendHotQues)
      },
    },
  }
  </script>
  
  <style>
  .graphd {
    height: 100%;
  }
  .graphd > .ask {
    /* height: 15%; */
    border: 1px solid #DCDFE6;
    /* box-shadow: 1px 1px 1px 1px slategray; */
    margin-bottom: 20px;
  }
  .graphd .header {
    display: flex;
    align-items: center;
    height: 40px;
    background-color: #f6f8fa;
    font-size: small;
    padding: 0 10px;
  }
  .graphd > .ask > .input {
    padding: 10px;
  }
  .graphd > .answer {
    width: 50%;
    height: 83%;
    float: left;
    border: 1px solid #DCDFE6;
    margin-right: 30px;
  }
  .graphd > .graph {
    width: calc(50% - 34px);
    height: 83%;
    float: left;
    /* box-shadow: 1px 1px 1px 1px slategray; */
    border: 1px solid #DCDFE6;
  }
  /* .graphd > .graph > .show {
    height: calc(100% - 35px);
  } */
  .graphd > .answer > .text {
    width: calc(100% - 20px);
    /* height: calc(100% - 55px); */
    padding: 10px;
    font-family: serif;
    font-size: 15px;
    /* overflow: scroll; */
  }

  
  </style>
  